const webpack = require('webpack'); //引入node的webpack
const path = require('path'); //引入node的path库
const HtmlwebpackPlugin = require('html-webpack-plugin');//引入node的html-webpack-plugin库

module.exports = {
	//页面入口配置文件
	entry:[
		// 'webpack/hot/dev-server', //热部署
		// 'webpack-dev-server/client?http://localhost:3000', //本地服务端口
		'./index.jsx' //入口文件
	],
	//入口文件输出配置
	output:{
		path:path.resolve(__dirname,'build'), //指定编译后的代码位置为build
		filename:'bundle.js' //打包JavaScript文件以及依赖(就是那些第三方的库)文件
	},
	module:{
		//加载器配置
		loaders:[
			//.jsx 文件使用babel-loader来编译处理
			{
				test:/\.jsx$/,
				loader:'babel-loader',
				exclude:/node_modules/,
				query:{presets:['react','es2015']}
			},
			//.less 文件使用style-loader/css-loader/less-loader处理
			{
				test:/\.less$/,
				loaders:['style-loader','css-loader','less-loader'],
				include:path.resolve(__dirname,'less')
			},
			//.js 文件使用babel-loader来编译处理
			{
				test:/\.js$/,
				loaders:['babel-loader'],
				exclude:/node_modules/
			},
			//图片文件使用url-loader来处理，小于8kb的直接转base64
			{
				test:/\.(jpg|png)$/,
				loader:'url-loader?limit=8192'
			}
		]
	},
	plugins:[
		new HtmlwebpackPlugin({
			title:'React',
			template:path.resolve(__dirname,'templates/index.ejs'),
			inject:'body'
		})
	],
	resolve:{
		extensions:['.js','.jsx','.less','.scss','.css'] //后缀名自动补全
	}

};